<template>
  <div class="predict-container">
    <div class="predict-content">
      <el-tabs v-model="activeTab" class="demo-tabs">
        <el-tab-pane label="模型训练" name="train">
          <model-train />
        </el-tab-pane>
        <el-tab-pane label="模型预测" name="predict">
          <model-predict />
        </el-tab-pane>
        <el-tab-pane label="预测展示" name="display">
          <predict-display />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ModelTrain from './components/ModelTrain.vue'
import ModelPredict from './components/ModelPredict.vue'
import PredictDisplay from './components/PredictDisplay.vue'

const activeTab = ref('train')
</script>

<style lang="scss" scoped>
.predict-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #ecf0f3;
  padding: 20px;
}

.predict-content {
  width: 1200px;
  min-height: 800px;
  background-color: #ecf0f3;
  border-radius: 12px;
  padding: 25px;
  box-shadow:
    10px 10px 10px #d1d9e6,
    -10px -10px 10px #f9f9f9;
}
</style>
